<template>
  <div>
    <el-backtop :right='20' :bottom='400'>
      <!-- 加个标签 -->
      回到顶部
    </el-backtop>

    <div class="Big">

      <div class="fold">
        <el-collapse accordion v-model="activeNames">
          <el-collapse-item :name="ind" class="BigrankList"
            v-for="(list,ind) in RankList" :key='ind'>
            <template slot="title">
              <span
                style='margin-left:20px;font-size:25px;font-weight: bold;'>{{list[0]}}
              </span>
            </template>
            <div class="rankList" v-for="(val,ind2) in list[1]" :key="ind2"
              @click="rankChange(val.id),ChangeClass($event)">
              <el-image v-if="val.coverImgUrl!== undefined"
                style="width:50px;height:50px;margin-right:10px"
                :src="val.coverImgUrl" fit="cover"></el-image>
              <span :title="val.name" class="over_ellipsis">{{val.name}}</span>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="fold_content">
        <!-- 榜单歌曲 -->
        <el-card>
          <div slot="header" style="height:10px">
            <span style='font-weight:bold;font-size:25px;line-height:10px;'>
              {{ranking_content_title}}
            </span>
          </div>
          <div v-for="(val,ind) in ranking_content_list" :key='ind'
            :title="val.name">
            <div class="describe over_ellipsis" @click="playMusic(val)">
              <span :class="{txt:ind+1<4}">{{ind+1}}</span>
              <div v-if="ind<3" style="width:70px;height:70px;margin-left:10px">
                <el-image v-if="thirdSong[ind]!== undefined"
                  :src="thirdSong[ind]" fit="cover"></el-image>
              </div>

              <span style="width:50%;text-align:left;">
                <span class="over_ellipsis" style="padding:0 10px">
                  {{val.name}}</span>
                <div class="art">
                  <span class="over_ellipsis art2" @click.stop="artist(name.id)"
                    v-for="(name,index) in val.ar" :key="index">
                    {{name.name}}</span>
                </div>
              </span>
              <span style="width:50%;text-align:right">
                <span class='icon'>
                  <i class="el-icon-video-play icon_content"></i>
                  <i class="el-icon-download icon_content"
                    @click.stop="download(val.id)"></i>
                  <i class="el-icon-star-off icon_content"
                    @click.stop='like(val)'></i>
                </span>
                <span v-ChangeTime>{{val.dt}}</span>
              </span>
            </div>
          </div>
        </el-card>
      </div>

    </div>

  </div>
</template>

<script>
import { allRanking, playList } from '../../api/Ranking'
import { MusicDetails } from '../../api/Play'
import { PlayMusic } from '../../api/Play.js'
import download from "../../../node_modules/downloadjs/download.js"

export default {
  name: '',
  data () {
    return {
      RankList: [],
      // 常规榜单
      ranking_content_list: [],
      // 当前榜单内歌曲
      classFlag: false,
      thirdSong: [],
      // 当前榜单内前三歌曲图片
      ranking_content_title: '',
      // 当前榜单标题 
      activeNames: 0,
    };
  },
  async created () {
    let res = await allRanking()
    // 获取所有榜单
    this.RankList.push(
      // 常规榜单
      ['常规榜单', res.data.list.slice(0, 4)],
      ['云音乐榜单', [...res.data.list.slice(4, 7), ...res.data.list.slice(8, 11)]],
      ['国外流行音乐榜单', res.data.list.slice(11, 19)],
      ['云音乐二次元榜单', res.data.list.slice(19, 22)],
      ['全球媒体榜单', res.data.list.slice(22, 38)]
    )
    this.rankChange(19723756)
    this.$nextTick(() => {
      let rankL = document.querySelectorAll('.rankList')
      rankL.forEach(val => val.classList.remove('rankListPointer'))
      rankL[0].classList.add('rankListPointer')
    })
  },
  methods: {

    playMusic (val) {
      // 点击之后播放音乐
      PlayMusic({ id: val.id }).then((res) => {
        // 播放之前检查一下能不能播
        console.log(res);
        if (res.data.data[0].url == null || Math.floor(res.data.data[0].time / 1000) / 60 < 1) return this.ErrorAlert('歌曲无法播放')
        // 若没有url或音乐时间小于60秒则判定为无法播放
        this.$router.push({ name: 'play', query: { val: JSON.stringify(val), url: JSON.stringify(res.data.data[0].url) } })
        // 由于传参无法传复杂数据类型,所以先转化为字符串
      }).catch((err) => {
        console.log(err);
      })
    },
    ErrorAlert (mes) {
      // 错误提示
      return this.$message({
        message: mes,
        duration: 700,
        type: 'error'
      });
    },
    artist (art) {
      // 点击作家
      this.$router.push({ name: 'singer', query: { id: art } })
    },
    like (val) {
      // 点击收藏
      let local = JSON.parse(localStorage.getItem('UserInfoList'))['music']
      if (Boolean(local.find((val2) => val2.id == val.id))) {
        return this.ErrorAlert('已收藏过')
      }
      this.$store.dispatch('Change', ['music', {
        id: val.id,
        title: val.name,
        name: val.ar,
        dt: val.dt
      }])
      this.ErrorAlert('收藏歌曲成功', 'success')
    },

    download (id) {
      // 下载按钮
      PlayMusic({ id: id }).then((res) => {
        // 播放之前检查一下能不能播
        if (res.data.data[0].url == null || Math.floor(res.data.data[0].time / 1000) / 60 < 1) return this.ErrorAlert('歌曲无法下载')
        // 若没有url或音乐时间小于60秒则判定为无法播放
        download(res.data.data[0].url)
      }).catch((err) => {
        this.ErrorAlert('下载失败')
      })
    },
    ErrorAlert (mes, ty = 'error') {
      // 错误提示
      return this.$message({
        message: mes,
        duration: 700,
        type: ty
      })
    },
    ChangeClass (e) {
      // 点击添加类名
      this.$nextTick(() => {
        let rankL = document.querySelectorAll('.rankList')
        rankL.forEach(val => val.classList.remove('rankListPointer'))
        e.currentTarget.classList.add('rankListPointer')
      })
    },
    async rankChange (id) {
      let res2 = await playList({ id: id })
      // 获取榜单内所有音乐
      this.ranking_content_title = res2.data.playlist.name
      this.ranking_content_list = res2.data.playlist.tracks
      let list = []
      this.ranking_content_list.forEach((val, ind) => {
        ind < 3 ? list.push(val.id) : null
      })
      let res3 = await MusicDetails({ ids: list.join(',') })
      // 获取前三首歌曲的信息
      this.thirdSong = []
      res3.data.songs.forEach((val, ind) => {
        this.thirdSong.push(val.al.picUrl)
      })

    }
  },

  components: {},

  props: {},

  watch: {},

  computed: {},

}

</script>
<style scoped >
.el-backtop {
  /* 美化一下回到顶部按钮 */
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.5);
  background-color: black;
  width: 50px;
  height: 200px;
  border-radius: 10px;
}
.Big {
  display: flex;
  flex-direction: row;
  /* 主轴方向 */
  justify-content: center;
  /* 主轴子元素排列方式 */
  padding-top: 3%;
}
.fold {
  width: 25%;
  height: 50%;
  margin-right: 10px;
  /* border: 1px solid #000; */
}
.fold_content {
  width: 65%;
  height: 50%;
}
.BigrankList {
  display: flex;
  flex-direction: column;
}

.rankList {
  display: flex;
  flex-direction: row;
  padding: 10px;
  line-height: 50px;
  cursor: pointer;
  font-size: 18px;
  border-top: 1px solid #ccc;
}
.rankList:nth-child(1) {
  border: none;
}
.rankListPointer {
  background-color: #ccc;
}
.over_ellipsis {
  /* 超出省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.describe {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  width: 100%;
  margin: 10px;
}
.describe:hover {
  background-color: #333;
  color: white;
}
.txt {
  color: red;
  font-weight: bold;
  font-size: 20px;
  line-height: 100%;
}

.art {
  display: inline-block;
  color: #ccc;
  width: 50%;
}

.art2:hover {
  color: red;
}
.icon {
  font-size: 20px;
  margin-right: 10px;
  color: white;
}
.icon_content:hover {
  color: red;
}
</style>